/**
 * 标签media框
 * @param {object} tagInfo 标签
 */

import React from 'react';
import PropTypes from 'prop-types';
import utils from 'utils';
import { Button, Balloon } from '@teamix/ui';
import { ButtonIcon, YunxiaoList, YunxiaoIcon } from '@alife/devops-ui';
import { navigate } from 'utils/router';
import DeleteConfirm from 'components/deleteConfirm';
import { PROJECT_ADMIN_ROLES, PROJECT_WRITE_ROLES } from 'utils/constants.js';
import AccessContainer from 'components/accessContainer';
import GpgTag from 'components/gpgTag';
import DescDivider from 'components/DescDivider';
import Cover from 'atComponents/Cover';
import './index.scss';
import intl from '../../../../../../../../locale';
import { getFeature } from 'utils/features';
const { Tooltip } = Balloon;
const { pathResource } = window.FORCE;

export default class CommitInfoMedia extends React.PureComponent {
  static propTypes = {
    tag: PropTypes.object,
  };

  constructor(props) {
    super(props);

    this.state = {
      isMsgDescVisible: false, // 提交信息的描述部分（即第一个换行符后的部分）默认隐藏，点...展开
    };
  }

  onChange = (e) => {
    e.preventDefault();
    const { tag } = this.props;
    navigate(`/${pathResource.fullPath}/commit/${tag.commit.id}?branch=${tag.commit.id}`);
  };

  render() {
    const { tag, lastMirrorSyncRecord } = this.props;
    const { role, isArchive } = pathResource;
    let isMirrorSynchronizing = false;
    if (lastMirrorSyncRecord) {
      isMirrorSynchronizing = utils.isMirrorSynchronizing(lastMirrorSyncRecord.sync_status);
    }
    return (
      <React.Fragment>
        <YunxiaoList.Item
          cover={<Cover type="icon" icon={<YunxiaoIcon type={'tag-line'} />} />}
          title={
            <>
              <a
                onClick={() => {
                  navigate(`/${pathResource.fullPath}/tree/${utils.revisionEncodeURI(tag.name)}`);
                }}
              >
                {tag.name}
              </a>
              {tag.message ? (
                <span
                  className="show-more-span"
                  onClick={() => {
                    const { isMsgDescVisible } = this.state;
                    this.setState({
                      isMsgDescVisible: !isMsgDescVisible,
                    });
                  }}
                >
                  <YunxiaoIcon type="more-line" size="small" className="show-more-icon" />
                </span>
              ) : null}
            </>
          }
          description={
            <>
              {tag.message && this.state.isMsgDescVisible ? (
                <div className="tag-msg-desc">{tag.message}</div>
              ) : null}
              <div className="tag-msg-commitinfo">
                <a onClick={this.onChange} className="text-black" style={{ whiteSpace: 'nowrap' }}>
                  {tag.commit.id.substring(0, 8)}
                </a>
                <DescDivider />
                <a onClick={this.onChange} className="text-black tag-msg-commitinfo-msg">
                  {tag.commit.message}
                </a>
                <DescDivider />
                <span className="tag-msg-commitinfo-time">
                  {utils.getBeautyTime(tag.commit.committed_date)}
                </span>
              </div>
            </>
          }
          extra={
            <>
              <YunxiaoList.Item.Actions>
                <GpgTag
                  signature={tag.signature}
                  author={{
                    name: tag.commit.committer_name || tag.commit.author_name || '',
                    avatarUrl: tag.commit.avatar_url || '',
                  }}
                />

                <Button
                  type="normal"
                  onClick={() => {
                    navigate(
                      `/${pathResource.fullPath}/compare?from=${encodeURIComponent(
                        tag.name,
                      )}&to=${encodeURIComponent(pathResource.defaultBranch)}&tab=tags`,
                    );
                  }}
                >
                  {intl.get({
                    id: 'code-assets.containers.tagInfoMedia.Comparison',
                    defaultMessage: '比较',
                  })}
                </Button>
                {isArchive === 'false' && !isMirrorSynchronizing ? (
                  <AccessContainer neededRole={getFeature('project.tag.allow_delete_develper') ? PROJECT_WRITE_ROLES : PROJECT_ADMIN_ROLES} role={role}>
                    <DeleteConfirm
                      tagName={tag.name}
                      remove={this.props.remove}
                      content={intl.get({
                        id: 'code-assets.containers.tagInfoMedia.Label',
                        defaultMessage: '标签',
                      })}
                      trigger={
                        <span>
                          <Tooltip
                            trigger={
                              <ButtonIcon
                                name="delete-line"
                                type="secondary"
                                className="tag-list-wrapper-right-item"
                              />
                            }
                            align="t"
                            text={intl.get({
                              id: 'code-assets.containers.tagInfoMedia.DeleteTags',
                              defaultMessage: '删除标签',
                            })}
                          />
                        </span>
                      }
                    />
                  </AccessContainer>
                ) : null}
                {isArchive === 'false' && isMirrorSynchronizing && (
                  <Tooltip
                    trigger={
                      <ButtonIcon
                        name="trashbin"
                        type="secondary"
                        className="tag-list-wrapper-right-item"
                        disabled
                      />
                    }
                    align="t"
                    text={intl.get({
                      id: 'code-assets.containers.tagInfoMedia.TheRepositoryIsBeingSynchronized',
                      defaultMessage: '仓库同步中，暂不支持操作，请稍后再试',
                    })}
                  />
                )}
              </YunxiaoList.Item.Actions>
            </>
          }
        />
      </React.Fragment>
    );
  }
}
